// 使用新的Sass模块系统导入基础样式
@use './variables' as vars;
@use './reset';

// 通用样式
.main-container {
  display: flex;
  min-height: 100vh;
  background-color: vars.$background-color;
}

.content-wrapper {
  flex: 1;
  padding: vars.$spacing-lg;
  margin-top: vars.$header-height;
  min-width: 0;
}

.main-content {
  background: #fff;
  padding: vars.$spacing-lg;
  border-radius: vars.$border-radius;
  box-shadow: vars.$box-shadow-light;
}

// 卡片样式
.card {
  background: #fff;
  border-radius: vars.$border-radius;
  box-shadow: vars.$box-shadow-light;
  padding: vars.$spacing-lg;
  margin-bottom: vars.$spacing-lg;
  transition: vars.$transition;
  &:hover {
    box-shadow: vars.$box-shadow;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: vars.$spacing-md;
  padding-bottom: vars.$spacing-md;
  border-bottom: 1px solid vars.$border-color;
}

.card-title {
  font-size: vars.$font-size-large;
  font-weight: 500;
  color: vars.$text-color;
}

// 布局工具类
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

// 间距工具类
.mb-1 {
  margin-bottom: vars.$spacing-xs;
}

.mb-2 {
  margin-bottom: vars.$spacing-sm;
}

.mb-3 {
  margin-bottom: vars.$spacing-md;
}

.mb-4 {
  margin-bottom: vars.$spacing-lg;
}

.mb-5 {
  margin-bottom: vars.$spacing-xl;
}

.p-1 {
  padding: vars.$spacing-xs;
}

.p-2 {
  padding: vars.$spacing-sm;
}

.p-3 {
  padding: vars.$spacing-md;
}

.p-4 {
  padding: vars.$spacing-lg;
}

.p-5 {
  padding: vars.$spacing-xl;
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

// 错误提示
.error-message {
  color: vars.$error-color;
  text-align: center;
  padding: vars.$spacing-lg;
}

// 空状态
.empty-state {
  text-align: center;
  padding: vars.$spacing-xl;
  color: vars.$text-color-secondary;
}

// 表格样式
.el-table {
  margin-top: vars.$spacing-md;
}

// 分页样式
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: vars.$spacing-lg;
}